<template>
  <el-dialog
    v-el-drag-dialog
    class="tag-setting-dialog"
    :title="$t('设置播放时间')"
    append-to-body
    :visible.sync="dialogShow"
    :close-on-click-modal="false"
    width="520px">
    <el-form>
      <el-form-item :label="$t('开始时间')">
        <input-hms v-model="startDate" :max="endDate" />
      </el-form-item>
      <el-form-item :label="$t('结束时间')">
        <input-hms v-model="endDate" :min="startDate" />
      </el-form-item>
    </el-form>
    <template slot="footer">
      <bs-confirm-button-icon size="mini" @click.native="okClick" />
      <bs-cancel-button-icon size="mini" @click.native="cancelClick" />
    </template>
  </el-dialog>
</template>

<script>
import InputHms from '../../media-center/components/InputHms'

export default {
  name: 'time-setting-dialog',
  components: {
    InputHms
  },
  data() {
    return {
      dialogShow: false,
      startDate: ['00', '00', '00'],
      endDate: ['23', '59', '59'],
      okCb: null,
      cancelCb: null
    }
  },
  methods: {
    show({startDate, endDate, okCb, cancelCb}) {
      this.startDate = startDate.slice()
      this.endDate = endDate.slice()
      this.okCb = okCb
      this.cancelCb = cancelCb
      this.dialogShow = true
    },
    okClick() {
      this.dialogShow = false
      this.okCb && this.okCb({
        startDate: this.startDate.slice(),
        endDate: this.endDate.slice()
      })
    },
    cancelClick() {
      this.dialogShow = false
      this.cancelCb && this.cancelCb()
    }

  }

}
</script>

<style lang="scss" scoped>
.tag-setting-dialog {
  ::v-deep .el-dialog__body {
    padding-top: 20px;
    padding-bottom: 10px;
  }

  .input-full {
    width: 100%;
  }
  .pb-10 {
    padding-bottom: 10px;
  }

}
</style>
